<template>
	<div class="main">
		<div class="top_nav">
			<span>{{$t('newList.title86')}}</span>
			<img @click="back" src="../assets/images/a34.png" alt="" />
		</div>
		<img class="banner" src="../assets/images/bankbanner.jpg" alt="">
		<div class="heng" @click="add">
			<img src="../assets/images/bankheng.png" alt="" />
			<div class="hengcon">
				<img src="../assets/images/bankicon.png" alt="" />
				<div>{{$t('newList.title87')}}</div>
			</div>
		</div>
		<div class="con">
			<div class="conbox">
				<div class="item">{{$t('newList.title88')}}</div>
				<div class="item1">{{$t('newList.title89')}}</div>
				<div class="item1">{{$t('newList.title90')}}</div>
				<div class="item1">{{$t('newList.title91')}}</div>
			</div>
			<div class="conbox" v-for="(item,index) in cardList" :key="index" v-if="item.cardAccount">
				<div class="items">
					<div class="items-item" v-if="item.Id == 1">{{$t('newList.title92')}}</div>
					<div class="items-item" v-if="item.Id == 2">{{$t('newList.title93')}}</div>
					<div class="items-item" v-if="item.Id == 3">{{$t('newList.title94')}}</div>
					<div class="items-item" v-if="item.Id == 4">USDT</div>
					<div class="items-item1">{{item.zsk_bank}}</div>
					<div>{{item.cardAccount}}</div>
				</div>
				<div class="items1">{{$t('newList.title95')}}</div>
				<div class="items1">{{$t('newList.title96')}}</div>
				<div class="items1">
					<div class="items-item">{{$t('newList.title97')}}</div>
				</div>
			</div>
		</div>
		<div class="beizhu">
			<div class="beizhutitle">{{$t('newList.title79')}}</div>
			<div class="beizhucon">{{$t('newList.title98')}}</div>
		</div>
		<div class="wind" v-show="flag">
			<section class="input-list">
				<div>
					<span>{{$t('newList.title99')}}</span>
				</div>
				<article>
					<select class="form-custom" v-model="bankType" @change="changes"
						style="background: none;color: #000;height: 1rem;border: none;width: 146px;">
						<option value="1">{{$t('newList.title92')}}</option>
						<option value="2">{{$t('newList.title93')}}</option>
						<option value="3">{{$t('newList.title94')}}</option>
						<option value="4">USDT</option>
					</select>
				</article>
			</section>
			<section class="input-list">
				<div>
					<span>{{$t('newList.title100')}}</span>
				</div>
				<article>
					<input type="text" v-model="cardForm.userName" :placeholder="$t('newList.title101')">
				</article>
			</section>
			<section class="input-list" v-show="bankType == 1">
				<div>
					<span>{{$t('newList.title102')}}</span>
				</div>
				<article>
					<select class="form-custom" v-model="cardForm.bankName"
						style="background: none;color: #000;height: 1rem;border: none;width: 146px;">
						<option v-for="(item) in bankList" :key="item.id">{{item.bank_name}}</option>
					</select>
				</article>
			</section>
			<section class="input-list" v-show="bankType == 2">
				<div>
					<span>{{$t('newList.title103')}}</span>
				</div>
				<article>
					<input type="text" v-model="cardForm.zsk_bank" :placeholder="$t('newList.title112')">
				</article>
			</section>
			<section class="input-list" v-show="bankType != 4">
				<div>
					<span>{{$t('newList.title104')}}</span>
				</div>
				<article>
					<input type="text" v-model="cardForm.cardAccount" :placeholder="$t('newList.title105')">
				</article>
			</section>

			<section class="input-list" v-show="bankType == 4">
				<div>
					<span>{{$t('newList.title111')}}</span>
				</div>
				<article>
					<input type="text" v-model="cardForm.cardAccount" :placeholder="$t('newList.title111')">
				</article>
			</section>
			<div class="flex">
				<div class="qu" @click="canle">{{$t('newList.title106')}}</div>
				<div class="bang" v-show="showbtn" @click="submitCard">{{$t('newList.title91')}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				bankType: 1,
				cardForm: {
					userName: "",
					bankName: "",
					cardAccount: "",
					zsk_bank: ""
				},
				user: {},
				shuju: [],
				typebank: 0,
				cardList: [],
				bankList: [],
				showbtn: true
			};
		},
		mounted() {
			this.load();
		},
		methods: {
			back() {
				this.$router.back(0)
			},
			changes(e) {
				let type = e.target.value;
				if (type == 2) {
					if (this.cardList[1].cardAccount) {
						this.showbtn = false
					} else {
						this.showbtn = true
					}
					this.cardForm.userName = this.cardList[1].userName
					this.cardForm.cardAccount = this.cardList[1].cardAccount
					this.cardForm.zsk_bank = this.cardList[1].zsk_bank
					this.cardForm.bankName = this.cardList[1].bankName
				} else if (type == 3) {
					if (this.cardList[2].cardAccount) {
						this.showbtn = false
					} else {
						this.showbtn = true
					}
					this.cardForm.userName = this.cardList[2].userName
					this.cardForm.cardAccount = this.cardList[2].cardAccount
					this.cardForm.zsk_bank = this.cardList[2].zsk_bank
					this.cardForm.bankName = this.cardList[2].bankName
				} else if (type == 1) {
					if (this.cardList[0].cardAccount) {
						this.showbtn = false
					} else {
						this.showbtn = true
					}
					this.cardForm.userName = this.cardList[0].userName
					this.cardForm.cardAccount = this.cardList[0].cardAccount
					this.cardForm.zsk_bank = this.cardList[0].zsk_bank
					this.cardForm.bankName = this.cardList[0].bankName
				} else if (type == 4) {
					if (this.cardList[3].cardAccount) {
						this.showbtn = false
					} else {
						this.showbtn = true
					}
					this.cardForm.userName = this.cardList[3].userName
					this.cardForm.cardAccount = this.cardList[3].cardAccount
					this.cardForm.zsk_bank = this.cardList[3].zsk_bank
					this.cardForm.bankName = this.cardList[3].bankName
				}
			},
			load() {
				this.$https.fetchGet("/m/personal", {}).then((res) => {
					this.user = res.data.member;
					this.loadInfo();
				});
				this.$https.fetchGet("/m/banklist", {}).then((res) => {
					this.bankList = res.data;
					if (res.data.length > 0) {
						this.cardForm.bankName = res.data[0].id
					}
				});
			},
			loadInfo() {
				this.shuju = [];
				if (this.user.username1 == null) {
					this.shuju.push(0);
				} else {
					this.shuju.push(1);
				}
				if (this.user.username2 == null) {
					this.shuju.push(0);
				} else {
					this.shuju.push(1);
				}
				if (this.user.username3 == null) {
					this.shuju.push(0);
				} else {
					this.shuju.push(1);
				}
				if (this.user.username4 == null) {
					this.shuju.push(0);
				} else {
					this.shuju.push(1);
				}



				this.cardList = [{
						Id: 1,
						cardAccount: this.user.card,
						userName: this.user.username1,
						bankName: this.user.bank
					},
					{
						Id: 2,
						cardAccount: this.user.fps,
						userName: this.user.username2,
						zsk_bank: this.user.zsk_bank
					},
					{
						Id: 3,
						cardAccount: this.user.fps_id,
						userName: this.user.username3
					},
					{
						Id: 4,
						cardAccount: this.user.usdt_address,
						userName: this.user.username4
					},
				];
				this.cardForm.userName = this.user.username1
				this.cardForm.cardAccount = this.user.card
				this.cardForm.bankName = this.user.bank
				if (this.cardList[0].cardAccount) {
					this.showbtn = false
				} else {
					this.showbtn = true
				}
			},
			submitCard() {
				if (!this.cardForm.userName) {
					this.$toast(this.$t('newList.title107'))
				} else if (this.bankType == 1 && !this.cardForm.bankName) {
					this.$toast(this.$t('newList.title108'))
				} else if (this.bankType == 2 && !this.cardForm.zsk_bank) {
					this.$toast(this.$t('newList.title109'))
				} else if (!this.cardForm.cardAccount && this.bankType != 4) {
					this.$toast(this.$t('newList.title110'))
				} else if (this.bankType == 4 && !this.cardForm.cardAccount) {
					this.$toast(this.$t('newList.title111'))
				} else if (this.cardForm.cardAccount) {
					var data = {};
					if (this.bankType == 4) {
						data.type = 4;
						data.username4 = this.cardForm.userName;
						data.usdt_address = this.cardForm.cardAccount;
					} else {
						data = {
							type: this.bankType,
							username: this.cardForm.userName,
						};
						switch (Number(this.bankType)) {
							case 1:
								data.bank = this.cardForm.bankName;
								data.card = this.cardForm.cardAccount;
								break;
							case 2:
								data.zsk_bank = this.cardForm.zsk_bank;
								data.fps = this.cardForm.cardAccount;
								break;
							case 3:
								data.fps_id = this.cardForm.cardAccount;
								break;
						}
					}
					console.log(data)
					this.$https.fetchPost("/m/set_bank", data).then((res) => {
						if (res.status.errorCode === 0) {
							this.$toast(res.status.msg);
							this.user = res.data;
							this.loadInfo();
							this.canle();
							this.bankType = 1;
						}
					});
				}
			},
			add() {
				this.flag = true;
			},
			canle() {
				this.flag = false;
			},
		},
	};
</script>

<style lang="less" scoped>
	.main {
		height: 100vh;
		background: url("../assets/images/bankbg.jpg") center no-repeat;
		background-size: cover;
		color: #fff;
		text-align: left;

		.banner {
			width: 100%;
			z-index: 0;
			margin-top: -50px;
		}

		.top_nav {
			width: 100%;
			height: 50px;
			border-bottom: 1px solid rgb(27, 27, 27);
			z-index: 1;

			span {
				line-height: 50px;
				font-size: 17px;
				color: #fff;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}

			img {
				width: 15px;
				position: absolute;
				top: 14px;
				left: 20px;
			}
		}

		.con {
			margin-top: 20px;
			padding: 0 20px;

			.conbox {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 3px;

				.item {
					width: 52%;
					background: linear-gradient(to bottom, #fed747 0%, #fbba23 100%);
					height: 22px;
					text-align: center;
					line-height: 22px;
					font-size: 14px;
					color: #000;
					border-radius: 5px;
				}

				.item1 {
					width: 15%;
					background: linear-gradient(to bottom, #fed747 0%, #fbba23 100%);
					height: 22px;
					text-align: center;
					line-height: 22px;
					font-size: 14px;
					color: #000;
					border-radius: 5px;
				}

				.items {
					width: 52%;
					background: linear-gradient(to bottom, #e03521 0%, #4a120c 100%);
					height: 30px;
					text-align: center;
					line-height: 30px;
					font-size: 11px;
					color: #fff;
					border-radius: 5px;
					display: flex;
					justify-content: center;
					align-items: center;

					.items-item {
						width: 52px;
						text-align: center;
						height: 18px;
						line-height: 20px;
						border-radius: 5px;
						background: linear-gradient(to bottom, #fed747 0%, #fbba23 100%);
						color: #000;
					}

					.items-item1 {
						margin: 0 3px;
						color: #fbba23;
					}
				}

				.items1 {
					width: 15%;
					background: linear-gradient(to bottom, #e03521 0%, #4a120c 100%);
					height: 30px;
					text-align: center;
					line-height: 30px;
					font-size: 11px;
					color: #fff;
					border-radius: 5px;
					display: flex;
					justify-content: center;
					align-items: center;

					.items-item {
						width: 22px;
						text-align: center;
						height: 18px;
						line-height: 20px;
						border-radius: 5px;
						background: linear-gradient(to bottom, #fed747 0%, #fbba23 100%);
						color: #000;
					}
				}
			}
		}
	}

	.wind {
		width: 76%;
		top: 150px;
		background-color: #fff;
		position: absolute;
		left: 50%;
		z-index: 23;
		transform: translateX(-50%);
		border-radius: 15px;
		padding: 15px;
		box-sizing: border-box;

		&>section {
			display: flex;
			font-size: .34rem;
			border-bottom: 1px solid rgb(41, 45, 48);
			align-items: center;
			border: .01rem solid #bca015;
			border-radius: .2rem;
			margin: .3rem 0;
			overflow: hidden;

			&>div {
				width: 2.3rem;
				height: 1rem;
				background-color: #ffdd1d;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: .5rem;

				&>span {
					color: #000;
					display: block;
					width: 2.2rem;
					position: relative;
					padding-left: 10px;
				}
			}

			&>article {
				width: 7rem;
				height: 1rem;

				input {
					width: 100%;
					line-height: 1rem;
					background-color: transparent;
					border: none;
					color: #000;
				}

				p {
					display: flex;
					// border:1px solid red;
					width: 6.3rem;
					justify-content: left;
					padding: .2rem .2rem;
					float: left;

					img {
						width: .5rem;
						height: .5rem;
						margin-right: 5px;
					}

					span {
						color: #000;
					}
				}
			}
		}

		select option {
			background-color: #000;
			color: #fff;
		}

		.btn {
			background: linear-gradient(to bottom, #e03521 0%, #4a120c 100%) !important;
			width: 96%;
			margin: .8rem auto 0;
			color: #fff;
			line-height: 0.9rem;
			text-align: center;
			font-size: .4rem;
			display: block;
			border-radius: .2rem;
		}

		.flex {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.bang {
			width: 60px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			font-size: 14px;
			background: linear-gradient(to bottom, #e03521 0%, #4a120c 100%);
			border-radius: 5px;
		}

		.qu {
			width: 70px;
			color: #000;
			height: 30px;
			line-height: 30px;
			text-align: center;
			font-size: 14px;
			border-radius: 5px;
		}
	}

	.heng {
		width: 100%;
		height: 28px;
		position: relative;
		margin-top: -12px;

		&>img {
			width: 50%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.hengcon {
			width: 100%;
			height: 28px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-left: 18px;
			z-index: 1;
			position: absolute;
			top: 0;
			left: 0;

			img {
				width: 20px;
				margin-right: 8px;
			}

			div {
				font-size: 14px;
				color: #000;
				font-weight: bold;
			}
		}
	}

	.beizhu {
		margin-top: 20px;
		padding: 0 20px;

		.beizhutitle {
			width: 60px;
			background: linear-gradient(to bottom, #fed747 0%, #fbba23 100%);
			height: 22px;
			text-align: center;
			line-height: 24px;
			font-size: 12px;
			color: #000;
			border-radius: 5px;
		}

		.beizhucon {
			margin-top: 14px;
			font-size: 14px;
			color: #fff;
			line-height: 24px;
			text-align: left;
		}
	}
</style>